<template>
<div class="user">
    <van-row class="head">
        <van-col span="8">
            <img :src="avatar" alt="">
        </van-col>
        <van-col span="10" class="user-login" @click="openModal">
            {{nickname}}
        </van-col>
        <van-col span="6" class="login-out">
            <van-icon :name="isLogin?'cross':'arrow'" @click="logout"></van-icon>
        </van-col>
    </van-row>
    <van-grid :column-num="3" square>
        <van-grid-item v-for="(item, index) in mydata" :key="index" :icon="item.icon" :text="item.title" />
    </van-grid>
    <transition name="van-fade">
        <div class="login-form" v-show="isShow">
            <!-- 遮罩层 -->
            <div class="login-modal" @click="closeModal"></div>
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </transition>
</div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
            isLogin:true,
            username: '',
            password: '',
            avatar: require('@/assets/user.png'),
            nickname: '用户登录',
            mydata: [{
                    title: "我的订单",
                    icon: "label-o"
                },
                {
                    title: "优惠券",
                    icon: "bill-o"
                },
                {
                    title: "礼品卡",
                    icon: "goods-collect-o"
                },
                {
                    title: "我的收藏",
                    icon: "location-o"
                },
                {
                    title: "我的足迹",
                    icon: "flag-o"
                },
                {
                    title: "会员福利",
                    icon: "contact"
                },
                {
                    title: "地址管理",
                    icon: "aim"
                },
                {
                    title: "账号安全",
                    icon: "warn-o"
                },
                {
                    title: "联系客服",
                    icon: "service-o"
                },
                {
                    title: "帮助中心",
                    icon: "question-o"
                },
                {
                    title: "意见反馈",
                    icon: "smile-comment-o"
                },
            ],
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        logout() {
            localStorage.clear()
            this.getUserInfo()
        },
        getUserInfo() {
            let token = localStorage.getItem('token')
            if (token) {
                let userInfo = JSON.parse(localStorage.getItem('userInfo'))
                this.avatar = userInfo.avatar
                this.nickname = userInfo.nickname
            }else{
                this.avatar = require('@/assets/user.png')
                this.nickname = '用户登录'
                this.isLogin = false
            }
        },
        openModal() {
            let token = localStorage.getItem('token')
            if (token) {
                return
            }
            this.isShow = true
        },
        closeModal() {
            this.isShow = false
        },
        async onSubmit(val) {
            let username = val['用户名']
            let pwd = val['密码']
            const res = await this.$http.post('auth/loginByWeb', {
                username,
                pwd
            })
            if (res.data.errno == 0) {
                this.$toast.success('登陆成功')
                localStorage.setItem('token', res.data.data.token)
                localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
                setTimeout(() => {
                    this.isLogin = true
                    this.isShow = false
                    this.avatar = res.data.data.userInfo.avatar
                    this.nickname = res.data.data.userInfo.nickname
                }, 1000)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.head {
    background-color: rgb(0, 0, 0, .5);
    color: #fff;
    display: flex;
    justify-content: space-around;
    padding: .2rem .1rem;
    align-items: center;

    img {
        border-radius: 50%;
        width: .7rem;
    }

    .user-login {
        margin-left: -.5rem;
    }

    .login-out {
        padding-left: 1rem;
    }
}

.login-form {
    .login-modal {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .van-form {
        width: 90%;
        height: 2rem;
        background-color: #fff;
        position: absolute;
        top: 30%;
        left: 50%;
        margin-left: -45%;
        padding: .2rem 0;
    }
}
</style>
